@charset "UTF-8";
.error, .seriousError {
  border: 1px solid red;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

.error a, .seriousError a, .error .disabled, .seriousError .disabled {
  color: red;
  font-weight: 100;
}

h1.error, h1.seriousError {
  font-size: .075rem;
}

.disabled {
  color: gray;
}

/*
跟变量和混合器不同，继承不是仅仅用css样式替换@extend 处的代码那么简单
原理: 如果.seriousError @extend .error, 那么样式表中任何一处.errot都用.error  .seriousError 这一组选择器进行替换。
这就意味着相关的样式会如预期的那样应用到.error和.seriousError
*/
/*
关于@extend有俩个要点
1. 跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小，页面加载会更快
2. 继承遵从css层叠的规则，当俩个不同的css规则应用到同一个html元素上时，并且这俩个不同的css规则对同一属性的修饰存在不同的值，
   css层叠规则会决定应用哪个样式。相当直观: 通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。
*/
